<template>
  <div class="box">
    {{ 1 + 1 }}
    {{ a }}
    {{ b }}
    {{ test.t.a }}
    {{ test1 }}
    {{ test1_1.abc }}
    <div>
      test2 {{ test2.a }}
      <input type="text" v-model="test2.a.value" />
    </div>
    <div>
      <input type="text" v-model="test.t.a.value" />
      <input type="text" v-model="b" />
      <input type="text" v-model="c.a.value" />
      <input type="text" v-model="d" />
      {{ d }}
      <button @click="add">添加</button>
      <button @click="add2">添加2</button>
      <button @click="add3">添加3</button>
      <button @click="test.t.add()">添加4</button>
    </div>
  </div>
</template>
<script setup>
import { markRaw, watch, reactive } from 'vue'
class Test {
  constructor() {
    this.a = ref(0)
    this.b = ref(1)
    this.c = {
      abc: ref(1)
    }
    watch(this.a, () => {
      console.log(this)
    })
  }
  add() {
    this.a.value = this.a.value + 1
    console.log(this.a)
  }
}
const test1 = ref('test1')
const test1_1 = {
  abc: ref('test1_1')
}
import { ref } from 'vue'
let a = 1
const add = () => {
  a++
}
let b = ref(0)

let c = {
  a: ref(0)
}

//再一个代理对象中访问ref自动解包
let e = reactive({
  abc: b
})
console.log(e.abc, 'reactive 访问自动解包')

const test = {
  t: new Test()
}
const test2 = new Test()
const add3 = () => {
  test.t.add()
}
const add2 = () => {
  b.value++
}
</script>
